<!--
 * @Description: 
 * @Author: dh
 * @Date: 2021-08-19 17:18:39
 * @LastEditors: dh
 * @LastEditTime: 2021-09-09 16:53:02
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<style>
			.coupon {
				width: 300px;
				height: 100px;
				line-height: 100px;
				margin: 50px auto;
				text-align: center;
				background:
					radial-gradient(circle at right bottom, transparent 10px, #ffffff 0px) top right / 50% 51px no-repeat,
					radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
					radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
					radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
				filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
			}

			.coupon span {
				display: inline-block;
				vertical-align: middle;
				margin-right: 10px;
				color: red;
				font-size: 50px;
				font-weight: 400;
			}
		</style>
		<p class="coupon"><span>200</span>优惠券</p>
	</body>
</html>
